<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轻印 (LightPrint) - A4徽章打印</title>
    <!-- 引入 Font Awesome -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    <!-- 引入小清新风格字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        /* 重置样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* 小清新背景 */
        body {
            width: 210mm;
            height: 297mm;
            margin: 0 auto;
            background-color: #f9f7f7;
            background-image: 
                linear-gradient(rgba(220, 230, 230, 0.5) 1px, transparent 1px),
                linear-gradient(90deg, rgba(220, 230, 230, 0.5) 1px, transparent 1px);
            background-size: 20px 20px;
            position: relative;
            font-family: 'Quicksand', "Microsoft YaHei", sans-serif;
            color: #78a1bb;
        }
        
        /* 页面容器 */
        .page {
            width: 100%;
            height: 100%;
            padding: 4mm;
            position: relative;
            border: 2px solid #d5e5e5;
            box-shadow: 0 0 15px rgba(200, 220, 220, 0.5), inset 0 0 10px rgba(200, 220, 220, 0.3);
        }
        
        /* 图片网格布局 - 修改为2列4行 */
        .image-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(4, auto);
            grid-gap: 2mm;
            width: 100%;
            height: 100%;
            justify-items: center;
            align-items: center;
        }
        
        /* 圆形图片容器 - 小清新风格 */
        .circle-container {
            position: relative;
            width: 255px;
            height: 255px;
            border-radius: 50%;
            overflow: hidden;
            border: 6px solid #a6d8d4;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            transition: all 0.3s ease;
        }
        
        /* 添加图片样式 */
        .circle-container .background-image {
            position: absolute;
            width: 100%;
            height: 100%;
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            transform: rotate(0deg) scale(1);
            transition: transform 0.2s;
        }
        
        /* 选中状态的图片容器 */
        .circle-container.selected {
            border-color: #f5b5c5;
        }
        
        /* 默认图标样式 */
        .default-icon {
            font-size: 80px;
            color: #a6d8d4;
            z-index: 1;
        }
        
        /* 打印按钮 - 小清新风格 */
        .print-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 10px 20px;
            background-color: #ffffff;
            color: #78a1bb;
            border: 2px solid #a6d8d4;
            border-radius: 30px;
            cursor: pointer;
            z-index: 100;
            font-family: 'Quicksand', sans-serif;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 2px;
            box-shadow: 0 0 10px rgba(166, 216, 212, 0.5);
            transition: all 0.3s ease;
        }
        
        .print-btn:hover {
            background-color: #a6d8d4;
            color: #ffffff;
            box-shadow: 0 0 20px rgba(166, 216, 212, 0.7);
        }
        
        /* 音效开关按钮样式 */
        .sound-btn {
            position: fixed;
            top: 20px;
            right: 130px;
            padding: 10px;
            width: 40px;
            height: 40px;
            background-color: #ffffff;
            color: #78a1bb;
            border: 2px solid #a6d8d4;
            border-radius: 50%;
            cursor: pointer;
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 10px rgba(166, 216, 212, 0.5);
            transition: all 0.3s ease;
        }
        
        .sound-btn:hover {
            background-color: #a6d8d4;
            color: #ffffff;
            box-shadow: 0 0 20px rgba(166, 216, 212, 0.7);
        }
        
        .sound-btn.muted {
            background-color: #f5b5c5;
            border-color: #f5b5c5;
            color: #ffffff;
        }
        
        /* 控制面板 */
        .control-panel {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: rgba(255, 255, 255, 0.9);
            border: 2px solid #a6d8d4;
            box-shadow: 0 0 15px rgba(166, 216, 212, 0.5);
            padding: 15px;
            z-index: 100;
            border-radius: 15px;
        }
        
        .control-panel h3 {
            color: #78a1bb;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        .control-panel ul {
            list-style-type: none;
        }
        
        .control-panel li {
            margin-bottom: 8px;
            color: #78a1bb;
        }
        
        .control-panel strong {
            color: #f5b5c5;
        }
        
        /* 霓虹灯效果改为柔和光晕 */
        .neon-border {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            pointer-events: none;
            z-index: 2;
        }
        
        .circle-container.selected .neon-border {
            box-shadow: 0 0 20px rgba(245, 181, 197, 0.5), inset 0 0 15px rgba(245, 181, 197, 0.3);
            animation: soft-pulse 1.5s infinite alternate;
        }
        
        @keyframes soft-pulse {
            from {
                opacity: 0.7;
                box-shadow: 0 0 20px rgba(245, 181, 197, 0.5), inset 0 0 15px rgba(245, 181, 197, 0.3);
            }
            to {
                opacity: 1;
                box-shadow: 0 0 30px rgba(245, 181, 197, 0.7), inset 0 0 25px rgba(245, 181, 197, 0.5);
            }
        }
        
        /* 打印样式 */
        @media print {
            body {
                width: 210mm;
                height: 297mm;
                background-color: white;
                background-image: none;
            }
            
            .page {
                border: none;
                box-shadow: none;
            }
            
            .print-btn, .control-panel, .sound-btn {
                display: none;
            }
            
            .circle-container {
                border: 6px solid #e0e0e0;
                box-shadow: none;
                background-color: #ffffff;
            }
            
            .circle-container.selected {
                border-color: #e0e0e0;
                box-shadow: none;
            }
            
            .circle-container .background-image {
                filter: none;
            }
            
            .neon-border {
                display: none;
            }

            .default-icon {
                display: none;
            }
            
            @page {
                size: A4;
                margin: 0;
            }
        }
    </style>
</head>
<body>
    <div class="page">
        <!-- 删除以下标题行 -->
        <!-- <h1 class="cyberpunk-title">赛博朋克图片展示</h1> -->
        <div class="image-grid" id="imageGrid">
            <!-- 图片将通过JavaScript动态加载 -->
        </div>
    </div>
    
    <button class="print-btn" onclick="printPage()">
        <i class="fas fa-print"></i> 打印
    </button>
    
    <button class="sound-btn" onclick="toggleSound()">
        <i class="fas fa-volume-up"></i>
    </button>
    
    <div class="control-panel">
        <h3>操作指南</h3>
        <ul>
            <li><strong>W/A/S/D</strong>: 上/左/下/右移动</li>
            <li><strong>Q/E</strong>: 逆/顺时针旋转</li>
            <li><strong>1/2</strong>: 缩小/放大图片</li>
            <li><strong>R</strong>: 重置图片</li>
            <li><strong>点击图片</strong>: 选择操作</li>
            <li><strong>双击图片</strong>: 替换图片</li>
        </ul>
    </div>
    
    <script>
        let selectedContainer = null;
        const MOVE_STEP = 5;
        const ROTATE_STEP = 5;
        const SCALE_STEP = 0.1;
        
        document.addEventListener('DOMContentLoaded', function() {
            const imageGrid = document.getElementById('imageGrid');
            const extensions = ['jpg', 'jpeg', 'png'];
            
            // 创建隐藏的文件输入框
            const fileInput = document.createElement('input');
            fileInput.type = 'file';
            fileInput.accept = 'image/*';
            fileInput.style.display = 'none';
            document.body.appendChild(fileInput);
            
            // 处理文件选择
            fileInput.addEventListener('change', function(event) {
                if (event.target.files && event.target.files[0]) {
                    const file = event.target.files[0];
                    const reader = new FileReader();
                    
                    reader.onload = function(e) {
                        // 更新当前选中容器的背景图片
                        if (selectedContainer) {
                            const backgroundImage = selectedContainer.querySelector('.background-image');
                            
                            // 重置图片状态
                            backgroundImage.style.transform = 'rotate(0deg) scale(1)';
                            backgroundImage.style.backgroundPosition = '50% 50%';
                            backgroundImage.style.backgroundSize = 'cover';
                            
                            // 设置新图片
                            backgroundImage.style.backgroundImage = `url('${e.target.result}')`;
                            
                            // 移除加载指示器
                            const loadingIndicator = selectedContainer.querySelector('.default-icon');
                            if (loadingIndicator) {
                                loadingIndicator.remove();
                            }
                            
                            // 播放上传成功音效
                            playUploadSound();
                        }
                    };
                    
                    reader.readAsDataURL(file);
                }
                // 清空文件输入框的值，允许重复选择同一文件
                event.target.value = '';
            });
            
            // 创建2x4布局的图片容器
            for (let i = 0; i < 8; i++) {
                const circleContainer = document.createElement('div');
                circleContainer.className = 'circle-container';
                
                const backgroundImage = document.createElement('div');
                backgroundImage.className = 'background-image';
                circleContainer.appendChild(backgroundImage);
                
                const neonBorder = document.createElement('div');
                neonBorder.className = 'neon-border';
                circleContainer.appendChild(neonBorder);
                
                // 添加鼠标拖拽相关变量
                let isDragging = false;
                let startX, startY;
                let initialBgPosX, initialBgPosY;

                // 添加鼠标按下事件
                backgroundImage.addEventListener('mousedown', function(event) {
                    if (!this.style.backgroundImage) return;
                    
                    isDragging = true;
                    startX = event.clientX;
                    startY = event.clientY;
                    
                    const style = window.getComputedStyle(this);
                    initialBgPosX = parseFloat(style.backgroundPositionX) || 50;
                    initialBgPosY = parseFloat(style.backgroundPositionY) || 50;
                    
                    event.preventDefault();
                });

                // 添加鼠标移动事件
                document.addEventListener('mousemove', function(event) {
                    if (!isDragging || !selectedContainer) return;
                    
                    const deltaX = event.clientX - startX;
                    const deltaY = event.clientY - startY;
                    
                    const backgroundImage = selectedContainer.querySelector('.background-image');
                    // 获取当前 scale
                    let scale = 1;
                    const transform = backgroundImage.style.transform;
                    const match = transform.match(/scale\(([\d.]+)\)/);
                    if (match) {
                        scale = parseFloat(match[1]);
                    }
                    // 判断缩放比例，修正方向
                    let newX, newY;
                    if (scale >= 1) {
                        newX = initialBgPosX + (deltaX * 1.5) / scale;
                        newY = initialBgPosY + (deltaY * 1) / scale;
                    } else {
                        newX = initialBgPosX - (deltaX * 1.5) / scale;
                        newY = initialBgPosY - (deltaY * 1) / scale; // 这里也要用减号
                    }
                    backgroundImage.style.backgroundPosition = `${newX}% ${newY}%`;
                });

                // 添加鼠标释放事件
                document.addEventListener('mouseup', function() {
                    isDragging = false;
                });

                // 添加鼠标离开事件
                document.addEventListener('mouseleave', function() {
                    isDragging = false;
                });
                
                // 修改点击事件处理
                circleContainer.addEventListener('click', function(event) {
                    // 检查是否已有图片
                    const hasImage = this.querySelector('.background-image').style.backgroundImage !== '';
                    
                    // 更新选中状态
                    if (selectedContainer) {
                        selectedContainer.classList.remove('selected');
                    }
                    selectedContainer = this;
                    this.classList.add('selected');
                    
                    // 如果没有图片，触发文件选择
                    if (!hasImage) {
                        fileInput.click();
                    }
                    
                    // 播放选中音效
                    playSelectSound();
                });
                
                // 添加双击事件处理
                circleContainer.addEventListener('dblclick', function(event) {
                    // 更新选中状态
                    if (selectedContainer) {
                        selectedContainer.classList.remove('selected');
                    }
                    selectedContainer = this;
                    this.classList.add('selected');
                    
                    // 无论是否有图片，都触发文件选择
                    fileInput.click();
                    
                    // 播放选中音效
                    playSelectSound();
                });
                
                // 添加加载指示器
                const loadingIndicator = document.createElement('div');
                loadingIndicator.className = 'default-icon';
                loadingIndicator.innerHTML = '<i class="fas fa-image"></i>';
                circleContainer.appendChild(loadingIndicator);
                
                imageGrid.appendChild(circleContainer);
            }
        });
        
        // 播放上传成功音效
        let isSoundEnabled = true;
        
        // 音效开关函数
        function toggleSound() {
            const soundBtn = document.querySelector('.sound-btn');
            isSoundEnabled = !isSoundEnabled;
            
            if (isSoundEnabled) {
                soundBtn.innerHTML = '<i class="fas fa-volume-up"></i>';
                soundBtn.classList.remove('muted');
            } else {
                soundBtn.innerHTML = '<i class="fas fa-volume-mute"></i>';
                soundBtn.classList.add('muted');
            }
        }
        
        // 修改播放音效的函数，添加音效开关判断
        function playUploadSound() {
            if (!isSoundEnabled) return;
            
            try {
                const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                const oscillator = audioCtx.createOscillator();
                const gainNode = audioCtx.createGain();
                
                oscillator.type = 'sine';
                oscillator.frequency.setValueAtTime(440, audioCtx.currentTime);
                oscillator.frequency.exponentialRampToValueAtTime(880, audioCtx.currentTime + 0.1);
                
                gainNode.gain.setValueAtTime(0.3, audioCtx.currentTime);
                gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.2);
                
                oscillator.connect(gainNode);
                gainNode.connect(audioCtx.destination);
                
                oscillator.start();
                oscillator.stop(audioCtx.currentTime + 0.2);
            } catch (e) {
                console.log('Web Audio API not supported.');
            }
        }
        
        function playSelectSound() {
            if (!isSoundEnabled) return;
            
            try {
                const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                const oscillator = audioCtx.createOscillator();
                const gainNode = audioCtx.createGain();
                
                oscillator.type = 'sine';
                oscillator.frequency.setValueAtTime(880, audioCtx.currentTime); // A5
                oscillator.frequency.exponentialRampToValueAtTime(440, audioCtx.currentTime + 0.2); // A4
                
                gainNode.gain.setValueAtTime(0.3, audioCtx.currentTime);
                gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.2);
                
                oscillator.connect(gainNode);
                gainNode.connect(audioCtx.destination);
                
                oscillator.start();
                oscillator.stop(audioCtx.currentTime + 0.2);
            } catch (e) {
                console.log('Web Audio API not supported.');
            }
        }
        
        // 移动图片的函数
        function moveImage(direction) {
            if (!selectedContainer) {
                alert('请先选择一个图片！');
                return;
            }
            
            const backgroundImage = selectedContainer.querySelector('.background-image');
            const style = window.getComputedStyle(backgroundImage);
            
            // 分别获取 X 和 Y 的位置值
            let currentX = style.backgroundPositionX;
            let currentY = style.backgroundPositionY;
            
            // 将关键字或像素值转换为百分比（简化处理，假设初始为 center 或 50%）
            let xPercent = 50;
            let yPercent = 50;
            
            // 尝试解析当前的百分比值
            if (currentX.includes('%')) {
                xPercent = parseFloat(currentX);
            } else if (currentX === 'left') {
                xPercent = 0;
            } else if (currentX === 'right') {
                xPercent = 100;
            } // 'center' 或其他值默认为 50%
            
            if (currentY.includes('%')) {
                yPercent = parseFloat(currentY);
            } else if (currentY === 'top') {
                yPercent = 0;
            } else if (currentY === 'bottom') {
                yPercent = 100;
            } // 'center' 或其他值默认为 50%
            
            // 根据方向调整百分比
            switch(direction) {
                case 'up':
                    yPercent += MOVE_STEP;  // 修改：按w键（上）时图片向上移动
                    break;
                case 'down':
                    yPercent -= MOVE_STEP;  // 修改：按s键（下）时图片向下移动
                    break;
                case 'left':
                    xPercent += MOVE_STEP;
                    break;
                case 'right':
                    xPercent -= MOVE_STEP;
                    break;
            }
            
            // 应用新的背景位置
            backgroundImage.style.backgroundPosition = `${xPercent}% ${yPercent}%`;
        }
        
        // 添加旋转图片的函数
        function rotateImage(direction) {
            if (!selectedContainer) {
                alert('请先选择一个图片！');
                return;
            }
            
            const backgroundImage = selectedContainer.querySelector('.background-image');
            let currentRotation = 0;
            let currentScale = 1;
            
            // 获取当前的变换值
            const currentTransform = backgroundImage.style.transform || 'rotate(0deg) scale(1)';
            const rotateMatch = currentTransform.match(/rotate\(([-\d.]+)deg\)/);
            const scaleMatch = currentTransform.match(/scale\(([-\d.]+)\)/);
            
            // 获取当前旋转角度
            if (rotateMatch) {
                currentRotation = parseFloat(rotateMatch[1]);
            }
            
            // 获取当前缩放值
            if (scaleMatch) {
                currentScale = parseFloat(scaleMatch[1]);
            }
            
            // 根据方向调整旋转角度
            if (direction === 'clockwise') {
                currentRotation += ROTATE_STEP;
            } else {
                currentRotation -= ROTATE_STEP;
            }
            
            // 应用新的旋转角度，同时保持缩放值
            backgroundImage.style.transform = `rotate(${currentRotation}deg) scale(${currentScale})`;
        }
        
        // 添加缩放图片的函数
        function scaleImage(direction) {
            if (!selectedContainer) {
                alert('请先选择一个图片！');
                return;
            }
            
            const backgroundImage = selectedContainer.querySelector('.background-image');
            let currentScale = 100;
            
            // 获取当前的背景尺寸
            const currentSize = backgroundImage.style.backgroundSize;
            if (currentSize && currentSize !== 'cover') {
                currentScale = parseInt(currentSize);
            }
            
            // 根据方向调整缩放值
            if (direction === 'in') {
                currentScale -= SCALE_STEP * 100;
            } else {
                currentScale += SCALE_STEP * 100;
            }
            
            // 限制最小和最大缩放
            currentScale = Math.max(10, Math.min(200, currentScale));
            
            // 应用新的背景尺寸
            backgroundImage.style.backgroundSize = `${currentScale}%`;
        }
        
        // 添加重置图片的函数
        function resetImage() {
            if (!selectedContainer) {
                alert('请先选择一个图片！');
                return;
            }
            
            const backgroundImage = selectedContainer.querySelector('.background-image');
            
            // 重置所有变换
            backgroundImage.style.transform = 'rotate(0deg) scale(1)';
            backgroundImage.style.backgroundPosition = '50% 50%';
            backgroundImage.style.backgroundSize = 'cover';
        }

        // 修改键盘事件监听，添加重置功能
        document.addEventListener('keydown', function(event) {
            const key = event.key.toLowerCase();
            
            switch(key) {
                case 'w':
                case 'arrowup':
                    moveImage('up');
                    break;
                case 's':
                case 'arrowdown':
                    moveImage('down');
                    break;
                case 'a':
                case 'arrowleft':
                    moveImage('left');
                    break;
                case 'd':
                case 'arrowright':
                    moveImage('right');
                    break;
                case 'q':
                case '[':
                    rotateImage('counterclockwise');
                    break;
                case 'e':
                case ']':
                    rotateImage('clockwise');
                    break;
                case '1':
                case '-':
                    scaleImage('out');
                    break;
                case '2':
                case '=':
                    scaleImage('in');
                    break;
                case 'r':
                case '0':
                    resetImage();
                    break;
            }
        });
        
        // 打印功能
        function printPage() {
            window.print();
        }
    </script>
</body>
</html>